{include file="public/layout" /}
<body class="bodystyle" style="cursor: default; -moz-user-select: inherit;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page min-hg-c-10 {empty name='$web_navigation_switch'}on-off_show{/empty}">
    <!--遮罩给上面的class + on-off_show-->
    <div class="on-off_shade">
        <div class="on-off_shadeCon">
            <span>目前还没有开启导航模块功能，<a href="javascript:void(0);" data-url="{:url('Navigation/ajax_open_close')}" data-value="{$web_navigation_switch}" onclick="ajax_open_close(this);">我要开启</a></span>
        </div>
    </div>
    <div class="fixed-bar">
        <div class="item-title">
            {eq name='$Request.param.source' value='archives'}
            <a class="back_xin" href="javascript:history.back();"  title="返回"><i class="iconfont e-fanhui"></i></a>
            {else /}
            <a class="back_xin" href="{:url('Index/switch_map')}" title="返回"><i class="iconfont e-fanhui"></i></a>
            {/eq}
            {notempty name='$web_navigation_switch'}
            <a style="margin-left: 10px; float: right;font-size: 14px;" href="javascript:void(0);" data-url="{:url('Navigation/ajax_open_close')}" data-value="{$web_navigation_switch}" onclick="ajax_open_close(this);">关闭导航</a>
            {/notempty}
            <a style="float: right;font-size: 14px;" href="javascript:void(0);" data-url="{:url('Navigation/navigation_index')}" onclick="go_navigation_index(this);">管理</a>
            <div class="subject">
                <h3>导航管理</h3>
                <h5></h5>
            </div>
            <ul class="tab-base nc-row">
                {volist name="position_list" id="vo"}
                <li>
                    {eq name="$position_id" value="$vo.position_id"}
                    <a href="javascript:void(0);" class="tab current"><span>{$vo.position_name}</span></a>
                    {else /}
                    <a href="{:url('Navigation/index',['position_id'=>$vo.position_id])}" class="tab"><span>{$vo.position_name}</span></a>
                    {/eq}
                </li>
                {/volist}
            </ul>
        </div>
    </div>
    <div class="flexigrid">
        <div class="mDiv pt0">
            <div class="ftitle">
				<div class="fbutton">
				    <a href="javascript:void(0);" onclick="add(this,'新增');" data-url="{:url('Navigation/add',['position_id'=>$position_id])}">
				        <div class="add" title="新增">
				            <span class=""><i class="layui-icon layui-icon-addition"></i>新增</span>
				        </div>
				    </a>
				</div>
            </div>
        </div>
        <div class="hDiv">
            <div class="hDivBox">
                <table cellspacing="0" cellpadding="0" style="width: 100%">
                    <thead>
                    <tr>
                        <th class="sign w40" axis="col0">
                            <div class="tc"><input type="checkbox" onclick="javascript:$('input[name*=ids]').prop('checked',this.checked);"></div>
                        </th>

                        <th axis="col3" class="w60">
                            <div class="tc tc">ID</div>
                        </th>

                        <th axis="col3" class="">
                            <div class="" style="padding-left: 10px;">
                                {if condition="!empty($tree['cookied_treeclicked'])"}
                                <img src="__SKIN__/images/tv-collapsable-last.gif" id="all_treeclicked" title="关闭所有子栏目" style="float: none;" data-status="open" onClick="treeClicked(this,'all',0);">
                                {else /}
                                <img src="__SKIN__/images/tv-expandable.gif" id="all_treeclicked" title="展开所有子栏目" style="float: none;" data-status="close" onClick="treeClicked(this,'all',0);">
                                {/if}
                                <!-- <img src="__SKIN__/images/tv-expandable.gif" id="all_treeclicked" title="展开所有子栏目" style="float: none;" data-status="close" onClick="treeClicked(this,'all',0);"> -->
                                菜单名称
                            </div>
                        </th>

                        <th axis="col2" class="w120">
                            <div class="tc">位置</div>
                        </th>

                        <th axis="col2" class="w100">
                            <div class="tc">状态</div>
                        </th>

                        <th axis="col1" class="w200">
                            <div class="tc" >操作</div>
                        </th>

                        <th axis="col2" class="w100">
                            <div class="tc">排序</div>
                        </th>

                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="bDiv" style="height: auto;">
            <form id="PostForm">
                <div id="flexigrid" cellpadding="0" cellspacing="0" border="0">
                    <table style="width: 100%"  id="arctype_table" >
                        {empty name="list"}
                            <tr>
                                <td class="no-data" align="center" axis="col0" colspan="50">
                                    <div class="no_row">
                                        <div class="no_pic"><img src="__SKIN__/images/null-data.png"></div>
                                    </div>
                                </td>
                            </tr>
                        {else/}
                            {volist name="list" id="vo"}
                            <tr nctype="0" {if condition="!in_array($vo.parent_id, $tree.cookied_treeclicked) && 0 < $vo.parent_id "} style="display: none;" {/if} class="parent_id_{$vo['parent_id']}" data-level="{$vo['level']}" data-id="{$vo['nav_id']}">
                                <td class="sign">
                                    <div class="w40 tc"><input type="checkbox" name="ids[]" value="{$vo.nav_id}"></div>
                                </td>
                                <td class="sort">
                                    <div class="w60 tc">
                                        {$vo.nav_id}
                                    </div>
                                </td>
                                <td style="width: 100%">
                                    <div style="text-align: left;padding-left: 10px;">
                                        {gt name='vo.level' value='0'}
                                            {php}
                                            if (1 == $vo['level']) {
                                                echo '<span class="w40x"></span>';
                                            } else if ($vo['level'] >= 2) {
                                                echo '<span class="w40x w40xc'.$vo['level'].'" style="margin-right:'.(($vo['level'] - 1) * 25).'px;"></span>';
                                            }
                                          {/php}
                                        {/gt}

                                        {gt name="vo.has_children" value="0"}
                                        <img src="{in name='$vo.nav_id' value='$tree.cookied_treeclicked'}__SKIN__/images/tv-collapsable-last.gif{else /}__SKIN__/images/tv-expandable.gif{/in}" style="float: none;" fieldid="2" status="open" nc_type="flex" onClick="treeClicked(this,{$vo['nav_id']},0);" class="has_children"  data-level="{$vo['level']}" data-id="{$vo['nav_id']}">
                                        <!-- <img src="__SKIN__/images/tv-expandable.gif" style="float: none;" fieldid="2" status="open" nc_type="flex" onClick="treeClicked(this,{$vo['nav_id']},0);" class="has_children"> -->
                                        {else /}
                                        <img src="__SKIN__/images/tv-collapsable-last.gif" style="float: none;" fieldid="2" status="open" nc_type="flex">
                                        {/gt}

                                        {$vo.nav_name}
                                    </div>
                                </td>
                                <td class="sort">
                                    <div class="w120 tc">
                                        {$position_list[$position_id]['position_name']}
                                    </div>
                                </td>
                                <td class="sort">
                                    <div class="w100 tc">
                                        {eq name="$vo['status']" value='1'}
                                        <span class="yes" onClick="changeTableVal('nav_list','nav_id','{$vo.nav_id}','status',this);"><i class="fa fa-check-circle"></i>是</span>
                                        {else /}
                                        <span class="no" onClick="changeTableVal('nav_list','nav_id','{$vo.nav_id}','status',this);"><i class="fa fa-ban"></i>否</span>
                                        {/eq}
                                    </div>
                                </td>
                                <td>
                                    <div class="w200 tc">
                                        <a href="javascript:void(0);" onclick="add(this,'新增');" data-url="{:url('Navigation/add',['position_id'=>$position_id,'nav_id'=>$vo['nav_id']])}" class="btn blue"><i class="fa fa-pencil-square-o"></i>添加子菜单</a>
                                        <a href="javascript:void(0);" onclick="add(this,'编辑');" data-url="{:url('Navigation/edit',array('nav_id'=>$vo['nav_id']))}" class="btn blue"><i class="fa fa-pencil-square-o"></i>编辑</a>
                                        <a class="btn red"  href="javascript:void(0)" data-url="{:url('Navigation/list_del')}" data-id="{$vo.nav_id}" onClick="delfun(this);"><i class="fa fa-trash-o"></i>删除</a>
                                    </div>
                                </td>
                                <td class="sort">
                                    <div class="w100 tc">
                                        <input style="text-align: left;" name="sort_order[]" type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'');" onpaste="this.value=this.value.replace(/[^\d]/g,'');" onchange="changeTableVal('nav_list','nav_id','{$vo.nav_id}','sort_order',this);" size="4"  value="{$vo.sort_order}" />
                                    </div>
                                </td>
                            </tr>
                            {/volist}
                        {/empty}
                        </tbody>
                    </table>
                </div>
            <div class="iDiv" style="display: none;"></div>
        </div>
        {notempty name="list"}
        <div class="tDiv">
            <div class="tDiv2">
                <div class="fbutton checkboxall">
                    <input type="checkbox" class="checkAll" onclick="javascript:$('input[name*=ids]').prop('checked', this.checked);">
                </div>
                <div class="fbutton">
                    <a onclick="batch_del(this, 'ids');" data-url="{:url('Navigation/list_del')}">
                        <div class="add" title="批量删除">
                            <span>批量删除</span>
                        </div>
                    </a>
                </div>
                <div class="fbutton">
                    <a href="javascript:void(0);" onclick="copyToClipBoard('{$position_id}');">
                        <div class="add" title="标签调用">
                            <span>标签调用</span>
                        </div>
                    </a>
                </div>
            </div>
            <div style="clear:both"></div>
        </div>
        {/notempty}
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $('input[type=checkbox].checkAll').click(function() {
            $('input[type=checkbox]').prop('checked', this.checked);
        });
        setCookies('navigation-treeClicked-Arr',JSON.stringify({$tree.cookied_treeclicked_arr}));
    });

    $(document).ready(function(){
        // 表格行点击选中切换
        $('#flexigrid > table>tbody >tr').click(function(){
            $(this).toggleClass('trSelected');
        });

        // 点击刷新数据
        $('.fa-refresh').click(function(){
            location.href = location.href;
        });

        // 批量操作
        $(".dropdown-bt").click(function(){
            $(".dropdown-menus").slideToggle(200);
            event.stopPropagation();
        })
        $(document).click(function(){
            $(".dropdown-menus").slideUp(200);
            event.stopPropagation();
        })
    });

    function add(obj,name) {
        var url = $(obj).data('url');
        layer.open({
            shade: layer_shade,
            type: 2,
            title: name+'菜单',
            area: ['80%', '90%'],
            content: url
        });
    }

    // 点击展开 收缩节点
    function treeClicked(obj,id,reload){
        if (id == 'all') {
            if (1 == reload) {
                var status = getCookie('navigation-treeClicked');
                if (!status) {
                    status = $(obj).attr('data-status');
                }
            } else {
                var status = $(obj).attr('data-status');
            }
            if (status == 'close') {
                setCookies('navigation-treeClicked-Arr', JSON.stringify({$tree.parent_ids}));
                setCookies('navigation-treeClicked_All', 1);//1为全部展开,0-为非全部展开

                $('tr[class^=parent_id_]').show().find('img').attr('src', '__SKIN__/images/tv-collapsable-last.gif');
                $(obj).attr('data-status', 'open').attr('title','关闭所有子栏目').attr('src','__SKIN__/images/tv-collapsable-last.gif');
            } else {
                setCookies('navigation-treeClicked-Arr', '');
                setCookies('navigation-treeClicked_All', 0);

                $('tr[data-level=0]').find('img.has_children').attr('src', '/public/static/admin/images/tv-collapsable-last.gif').trigger('click');
                $('tr[class^=parent_id_]').removeClass('trSelected');
                $(obj).attr('data-status', 'close').attr('title','展开所有子栏目').attr('src','__SKIN__/images/tv-expandable.gif');
            }
            setCookies('navigation-treeClicked', status);
            return false;
        }

        var src = $(obj).attr('src');
        if (src == '__SKIN__/images/tv-expandable.gif') {
            var arr = [];
            var str = getCookie('navigation-treeClicked-Arr');
            if ('' == str || null == str || 'null' == str) {
                arr.push(id);
            } else {
                arr = JSON.parse(str);
                if (!arr.includes(id)) arr.push(id);
            }
            arr = JSON.stringify(arr);
            setCookies('navigation-treeClicked-Arr', arr);

            $(".parent_id_"+id).show();
            $(obj).attr('src','__SKIN__/images/tv-collapsable-last.gif');
            var status = 'close';
        } else {
            var str = getCookie('navigation-treeClicked-Arr');
            var arr = [];
            var key = -1;
            var level = '';
            if ('' != str) {
                arr = JSON.parse(str);
                key = $.inArray(id,arr);
                if (-1 < key) arr.splice(key,1);
                level = $(obj).attr('data-level');
                $(obj).parent().parent().parent().nextAll().each(function() {
                    if ($(this).attr('data-level') > level) {
                        key = $.inArray(parseInt($(this).attr('data-id')),arr);
                        if (-1 < key) arr.splice(key,1);
                    } else {
                        return false;
                    }
                });
                arr = JSON.stringify(arr);
                setCookies('navigation-treeClicked-Arr', arr);
                setCookies('navigation-treeClicked_All', 0);
            }

            $(obj).attr('src','__SKIN__/images/tv-expandable.gif');
            var status = 'open';
            // 如果是点击减号, 遍历循环他下面的所有都关闭
            var tbl = document.getElementById("arctype_table");
            cur_tr = obj.parentNode.parentNode.parentNode;
            var fnd = false;
            for (i = 0; i < tbl.rows.length; i++)
            {
                var row = tbl.rows[i];

                if (row == cur_tr)
                {
                    fnd = true;
                }
                else
                {
                    if (fnd == true)
                    {

                        var level = parseInt($(row).data('level'));
                        var cur_level = $(cur_tr).data('level');

                        if (level > cur_level)
                        {
                            $(row).hide();
                            $(row).find('img.has_children').attr('src','__SKIN__/images/tv-expandable.gif');
                        }
                        else
                        {
                            fnd = false;
                            break;
                        }
                    }
                }
            }
        }
        setCookies('navigation-treeClicked', status);
    }
    function go_navigation_index(obj) {
        var url = $(obj).data('url');
        layer.open({
            type: 2,
            shade: layer_shade,
            title: '导航管理',
            area: ['80%', '90%'],
            content: url
        });
    }
    function copyToClipBoard(position_id) {
        var liststr ="{\eyou:navigation position_id='"+position_id+"' id='nav'}\n" +
            '    <li>\n' +
            '        <img src="{\$nav.nav_pic}">\n' +
            '        <a href="{\$nav.nav_url}" {\$nav.target} {\$nav.nofollow}>{\$nav.nav_name}</a>\n' +
            '    </li>\n' +
            '{\/eyou:navigation}';
        var contentdiv = '<div class="dialog_content" style="margin: 0px; padding: 0px;"><dl style="padding:10px 30px;line-height:30px;"><dd>标签简单调用代码：</dd>';
        contentdiv += '<dd><textarea  style="width:410px;height:135px;">' + liststr + '</textarea></dd>';
        contentdiv += '<dd style="border-top: dotted 1px #E7E7E7; color: #F60;">请将相应标签复制并粘贴到对应模板文件中！<a href="https://www.eyoucms.com/doc/label/all/11849.html" target="_blank">复杂调用点击去看手册</a></dd></dl></div>'
        layer.open({
            title: '标签调用',
            type: 1,
            shade: layer_shade,
            skin: 'layui-layer-demo',
            area: ['480px', '300px'], //宽高
            content: contentdiv
        });
    }
    function delfun(obj){
        var confirm_title = '确认删除？如有子菜单将一起清空。';

        layer.confirm(confirm_title, {
            shade: layer_shade,
            area: ['480px', '190px'],
            move: false,
            title: '提示',
            btnAlign:'r',
            closeBtn: 3,
            btn: ['确定', '取消'] ,//按钮
            success: function () {
                  $(".layui-layer-content").css('text-align', 'left');
              }
        }, function(){
            layer_loading('正在处理');
            // 确定
            $.ajax({
                type : 'post',
                url : $(obj).attr('data-url'),
                data : {del_id:$(obj).attr('data-id'),_ajax:1},
                dataType : 'json',
                success : function(data){
                    layer.closeAll();
                    if(data.code == 1){
                        layer.msg(data.msg, {icon: 1});
                        window.location.reload();
                    }else{
                        layer.alert(data.msg, {icon: 2, title:false});  //alert(data);
                    }
                }
            })
        }, function(index){
            layer.close(index);
        });
        return false;
    }

    function ajax_open_close(obj, inc_type, name,value){
        $.ajax({
            type : 'post',
            url : $(obj).attr('data-url'),
            data : {value:$(obj).attr('data-value'), _ajax:1},
            dataType : 'json',
            success : function(res){
                if(res.code == 1){
                    window.location.reload();
                }else{
                    showErrorMsg(res.msg);
                }
            },
            error: function(e){
                showErrorAlert(e.responseText);
            }
        })
    }
</script>
{include file="public/footer" /}
